<template>
  <view class="team_page">
    <view class="team_body">
      <view class="referrer-box">
        推荐人ID：
        <!-- <image class="referrer-avatar u-m-r-10" :src="referrerInfo.avatar" mode=""></image> -->
        {{ userInfo.recommendUserId }}
      </view>
      <view class="team-data-box">
        <view class="data-card">
          <view class="total-item">
            <view class="item-title">团队总金额(元)</view>
            <view class="total-num">{{ teamData.teamUserAmount || 0 }}</view>
          </view>
        </view>
        <view class="data-card">
          <view class="total-item">
            <view class="item-title">团队总人数(人)</view>
            <view class="total-num">{{ teamData.teamUserCount || 0 }}</view>
          </view>
        </view>
        <view class="data-card" style="margin-top: 24rpx">
          <view class="total-item">
            <view class="item-title">团队订单总金额(元)</view>
            <view class="total-num">{{
              teamData.teamUserOrderAmount || 0
            }}</view>
          </view>
        </view>
        <view class="data-card" style="margin-top: 24rpx">
          <view class="total-item">
            <view class="item-title">团队总订单数</view>
            <view class="total-num">{{
              teamData.teamUserOrderCount || 0
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <scroll-view class="team_scroll" scroll-y   @scrolltolower="loadMore">
      <i-card padding="24rpx" top="20rpx" v-for="(item, index) in teamList" :key="index">
        <view class="team_item">
          <!-- 上部分：用户信息 -->
          <view class="user_info">
            <image
              v-if="item.avatar"
              class="avatar"
              :src="item.avatar"
              mode="aspectFill"
            ></image>
            <image
              v-else
              class="avatar"
              src="../../static/images/head2@2x.png"
              mode="aspectFill"
            ></image>
            <view class="user_detail">
              <view class="name">
                <text style="margin-right: 10rpx;">{{ item.nickName }}</text>
                <i-tag radius="48rpx" size="18rpx" padding="4rpx 12rpx" bgColor="#FFE7C5" color="#FF7B00">{{ userLevelType[item.userLevel] }} </i-tag>
              </view>
              <view class="phone">账号: {{ item.mobile }}</view>
            </view>
						
          </view>
          <!-- 下部分：团队数据 -->
          <view class="team_data">
            <view class="data_item_one">
              <text class="label">团队订单总金额： {{ item.teamUserOrderAmount || 0 }}元</text>
            </view>
            <view class="data_item">
              <text class="label">团队订单： {{ item.teamOrderCount || 0 }}单</text>
            </view>
            <view class="data_item_one">
              <text class="label">团队设备总数： {{ item.teamDeviceCount || 0 }}台</text>
            </view>
            <view class="data_item">
              <text class="label">团队成员： {{ item.teamCount || 0 }}人</text>
            </view>
            <view class="data_item_one">
              <text class="label">创建时间：{{ item.createTime || '' }}</text>
            </view>
          </view>
        </view>
      </i-card>
			<i-more :status="loadStatus" />
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from "vue";
import useStore from "../../stores/index";
import { getUserStatisticsVo, getTeamUsers } from "../../api";
import { userLevelType } from '../../utils/common';
const store = useStore();
const teamData = ref<{
	teamUserAmount: number;
	teamUserCount: number;
	teamUserOrderAmount: number;
	teamUserOrderCount: number;
}>({
	teamUserAmount: 0,
	teamUserCount: 0,
	teamUserOrderAmount: 0,
	teamUserOrderCount: 0,
});
const loadStatus = ref('loadmore');
const teamList = ref<any[]>([]);
const formData = reactive({
  ypageNum: 1,
  ypageSize: 10,
  total: 0,
});

const userInfo = computed(() => store.userInfo);

const getTeamData = async () => {
  const { data } = await getUserStatisticsVo();
  teamData.value = data;
};

const getTeamList = async () => {
  loadStatus.value = 'loading'
  const { data } = await getTeamUsers(formData);
  teamList.value = teamList.value.concat(data.rows);
  formData.total = data.total;
  loadStatus.value =
  teamList.value.length < formData.total ? "loadmore" : "nomore";
};

const loadMore = () => {
  if (teamList.value.length < formData.total) {
    formData.ypageNum += 1;
    getTeamList();
  }
};

onMounted(() => {
  getTeamData();
  getTeamList();
});
</script>

<style lang="scss" scoped>
.team_page {
  width: 100%;
  height: calc(100vh - 100rpx);
  overflow: hidden;
  @include flexC;
}
.team_body {
  background: url(../../static/images/team_bg.png) center no-repeat;
  padding: 24rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
	height: 480rpx;

  .referrer-box {
    font-size: 24rpx;
    font-weight: 500;
    color: #333333;
    line-height: 30rpx;
    margin-bottom: 20rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 48rpx;
    padding: 12rpx 20rpx;
    color: #fff;
  }

  
}
.team_scroll {
    width: 100%;
		height: calc(100% - 790rpx);
		// height: 100%;
    flex: 1;
  }
// 团队信息总览
.team-data-box {
  @include flexRS;
  flex-wrap: wrap;
  box-sizing: border-box;

  .data-card {
    width: 38vw;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;

    .item-title {
      font-size: 22rpx;
      font-weight: 500;
      color: #666;
      line-height: 30rpx;
      margin-bottom: 10rpx;
    }

    .total-item {
      margin-bottom: 20rpx;
    }

    .total-num {
      font-size: 38rpx;
      font-weight: 500;
      color: #333333;
    }

    .category-num {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}

.team_item {
  // padding: 24rpx;

  .user_info {
    display: flex;
    align-items: center;
    padding-bottom: 24rpx;
    border-bottom: 1rpx solid #eeeeee;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .user_detail {
      .name {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 8rpx;
				@include flexR;
      }

      .phone {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .team_data {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 24rpx;
    .data_item_one {
      width: 70%;
    }
    .data_item {
      width: 30%;
    }
    .label {
      text-align: end;
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
